<template>
    <div class="operate">
      <el-button type="primary" @click="onAdd">新增</el-button>
    </div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column v-for="item in tableColumn" :key="item.prop" :prop="item.prop" :label="item.label"
        :width="item.width" show-overflow-tooltip>
        <template #default="scope">
          <span v-if="item.prop === 'type'">{{ getLabel(scope.row[item.prop], typeOption) }}</span>
          <span v-else-if="item.prop === 'status'">{{ getLabel(scope.row[item.prop], statusOption) }}</span>
          <span v-else-if="item.prop === 'pic'" style="text-align: center;"><img :src="scope.row[item.prop]" alt=""
              style="width: 100%;"></span>
          <span v-else-if="item.prop === 'ordercount'">{{ scope.row[item.prop] }}</span>
          <span v-else>{{ scope.row[item.prop] }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="150">
        <template #default="scope">
          <!-- <template slot-scope="scope"> -->
          <el-button link type="primary" size="small" @click="onShow(scope.row)">查看</el-button>
          <el-button link type="primary" size="small" @click="onEdit(scope.row)">编辑</el-button>
          <el-button link type="primary" size="small" @click="onDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page">
      <el-pagination v-model:current-page="current" v-model:page-size="size" :page-sizes="[10, 20, 30, 40]"
        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="fetchData"
        @current-change="fetchData" />
    </div>
    <el-dialog v-model="dialogVisible" :title="title" width="800px" @close="onClose(formRef)">
      <el-descriptions v-if="showData" :column="1">
        <el-descriptions-item v-for="item in tableColumn" :key="item.prop" :label="item.label">
          <span v-if="item.prop === 'type'">{{ getLabel(form[item.prop], typeOption) }}</span>
          <span v-else-if="item.prop === 'status'">{{ getLabel(form[item.prop], statusOption) }}</span>
  
          <span v-else>{{ form[item.prop] }}</span>
        </el-descriptions-item>
      </el-descriptions>
      <el-form v-else ref="formRef" :model="form" :rules="rules" label-width="140px" class="demo-ruleForm" status-icon>
        <el-form-item label="广告名称：" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="广告类型：" prop="type">
          <el-select v-model="form.type" placeholder="请选择">
            <el-option v-for="item in typeOption" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="开始时间：" prop="startTime">
          <el-date-picker v-model="form.startTime" type="datetime" placeholder="请选择" />
        </el-form-item>
        <el-form-item label="结束时间：" prop="endTime">
          <el-date-picker v-model="form.endTime" type="datetime" placeholder="请选择" />
        </el-form-item>
        <!-- <el-form-item label="下单数：" prop="ordercount">
          <el-input-number v-model="form.ordercount" :min="1" />
        </el-form-item> -->
        <el-form-item label="上下线状态：" prop="status">
          <el-select v-model="form.status" placeholder="请选择">
            <el-option v-for="item in statusOption" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="广告图片：" prop="pic">
          <el-upload   class="upload-demo"   :on-preview="handlePreview" action="https://jsonplaceholder.typicode.com/posts/">
                  <el-button size="small" type="primary">点击上传</el-button>
                  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
              </el-upload>
          
        </el-form-item>
        <el-form-item label="排序：" prop="sort">
          <el-input v-model="form.sort" type="textarea" :rows="1" />
        </el-form-item>
        <el-form-item label="广告链接：" prop="url">
          <el-input v-model="form.url" type="textarea" :rows="1" />
        </el-form-item>
      </el-form>
      <el-form-item label="广告备注：" prop="note" style="transform: translateX(7.5%);">
        <el-input v-model="form.note" type="textarea" :rows="6" />
      </el-form-item>
  
      <template #footer>
        <span v-if="!showData" class="dialog-footer">
          <el-button type="primary" @click="onSubmit(formRef)">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </template>
    
  <script lang="ts" setup>
  
  import { onMounted, ref } from "vue"
  import { ElNotification, ElMessageBox } from 'element-plus'
  import { smshomePage, smshomeAdd, smshomeEdit, smshomeDelId, smshomeOne } from "../../http/sms_home_advertise.js"
  
  
  const showData = ref(false)
  const dialogVisible = ref(false)
  const title = ref('')
  const current = ref(1)
  const size = ref(10)
  const total = ref(0)
  const tableData = ref([])
  const form = ref({
    id: '',
    type: '',
    name: '',
    startTime: '',
    endTime: '',
    status: '',
    clickcount: 1,
    ordercount: 1,
    url: '',
    note: '',
    sort: '',
    pic: ''
  })
  
  const formRef = ref()
  const rules = ref({
    name: [
      { required: true, message: '请输入广告名称', trigger: ['blur'] }
    ],
    type: [
      { required: true, message: '请选择广告类型', trigger: ['blur'] }
    ],
    startTime: [
      { required: true, message: '请选择开始时间', trigger: ['blur'] }
    ],
    endTime: [
      { required: true, message: '请选择结束时间', trigger: ['blur'] }
    ],
    pic: [
      { required: false, message: '请选择广告图片', trigger: ['blur'] }
    ],
    status: [
      { required: true, message: '请选择上下线状态', trigger: ['blur'] }
    ],
    // ordercount: [
    //   { required: true, message: '请选择下单数量', trigger: ['blur'] }
    // ],
    url: [
      { required: false, message: '请输入链接地址', trigger: ['blur'] }
    ],
    note: [
      { required: true, message: '请输入备注', trigger: ['blur'] }
    ]
  })
  const tableColumn = [
    {
      label: '编号',
      prop: 'id',
      width: 60
    },
    {
      label: '广告名称',
      prop: 'name',
      width: 120
    },
    {
      label: '广告类型',
      prop: 'type',
      width: 120
    },
    {
      label: '广告图片',
      prop: 'pic',
      width: 150
    },
    {
      label: '开始时间',
      prop: 'startTime',
      width: 120
    },
    {
      label: '结束时间',
      prop: 'endTime',
      width: 120
    },
    {
      label: '上下线状态',
      prop: 'status',
      width: 120
    },
    {
      label: '下单数',
      prop: 'ordercount',
      width: 120
    },
    {
      label: '点击数',
      prop: 'clickcount',
      width: 100
    },
  
    {
      label: '链接地址',
      prop: 'url',
      width: 120
    },
    {
      label: '备注',
      prop: 'note',
      width: 120
    },
  
    {
      label: '排序',
      prop: 'sort',
      width: 120
    }
  
  ]
  const typeOption = [
    {
      label: 'PC首页轮播',
      value: 0
    },
    {
      label: 'APP首页轮播',
      value: 1
    }
  ]
  
  const statusOption = [
    {
      label: '上线',
      value: 0
    },
    {
      label: '下线',
      value: 1
    }
  ]
  
  
  onMounted(() => {
    fetchData()
  })
  
  //图片
  const handlePreview = (file) => {
    console.log(file);
  }
  
  // 加载列表
  const fetchData = async () => {
    const response = await smshomePage({
      current: current.value,
      size: size.value
    })
    if (response) {
      tableData.value = response.data.page.records || []
      total.value = response.data.page.total
    }
  }
  
  // 根据值获取文本
  const getLabel = (value, options) => {
    const result = options.filter(item => {
      return item.value == value
    })
    return result.length > 0 ? result[0]['label'] : ''
  }
  
  // 关闭弹框
  const onClose = (formEl) => {
    form.value = {
      id: '',
      type: '',
      name: '',
      startTime: '',
      endTime: '',
      status: '',
      clickcount: 1,
      ordercount: 1,
      url: '',
      note: '',
      sort: '',
      pic: ''
    }
  
    // fetchData()
  }
  
  // 新增广告信息
  const onAdd = () => {
    title.value = '新增广告信息'
    showData.value = false
    dialogVisible.value = true
  }
  
  // 查看广告信息
  const onShow = async (row) => {
    title.value = '查看广告信息'
    const response = await smshomeOne(row.id)
    if (response) {
      form.value = response.data.help
      showData.value = true
      dialogVisible.value = true
    }
  }
  
  // 编辑广告信息
  const onEdit = async (row) => {
    title.value = '编辑广告信息'
    const response = await smshomeOne(row.id)
    if (response) {
      form.value = response.data.help
      showData.value = false
      dialogVisible.value = true
    }
  }
  
  // 删除广告信息
  const onDelete = (row) => {
    ElMessageBox.confirm(
      '是否要删除广告信息?',
      'Warning',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
      .then(async () => {
        const response = await smshomeDelId(row.id)
        if (response) {
          ElNotification({
            title: 'Success',
            message: '删除成功',
            type: 'success',
          })
          await fetchData()
        }
      })
  }
  
  // 提交
  const onSubmit = async (formEl) => {
    if (!formEl) return
    await formEl.validate(async (valid, fields) => {
      if (valid) {
        if (form.value.id) {
          const response = await smshomeEdit(form.value)
          if (response) {
            ElNotification({
              title: 'Success',
              message: '编辑成功',
              type: 'success',
            })
            formEl.resetFields()
            dialogVisible.value = false
            await fetchData()
          }
        } else {
          const response = await smshomeAdd(form.value)
          if (response) {
            console.log(response)
            ElNotification({
              title: 'Success',
              message: '新增成功',
              type: 'success',
            })
            formEl.resetFields()
            dialogVisible.value = false
            await fetchData()
          }
        }
        showData.value = false
      }
    })
  }
  
  </script>
    
  <style>
  .operate {
    margin-bottom: 10px;
  }
  
  .page {
    margin-top: 10px;
  }
  </style>
    